<template>
  <view class="content">
    <view class="info">
      <view class="del">
        <view class="in">桌位名称</view>
        <view class="fo">{{ data.item.name }}</view>
      </view>
      <view class="del">
        <view class="in">桌位号</view>
        <view class="fo">{{ data.item.markNo }}</view>
      </view>
      <view class="del">
        <view class="in">餐桌二维码</view>
        <image class="code" @click="handlePreview" :src="data.qrcode || data.item.qrCode" />
      </view>
    </view>
    <view class="foot">
      <view class="btn" @click="edit">修改</view>
      <view class="btn" @click="del">删除</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { err, back, toast, to } from '@/utils/uniapi';
import { api } from '@/api/mop_api';
const data = reactive({
  id: '',
  item: { name: '', markNo: '', qrCode: '' },
  qrcode: ''
});
onLoad((options) => {
  if (options) {
    data.id = options.id;
  }
  getid();
});
async function getid() {
  try {
    const { id } = data;
    const res = await api.board_get({ id });
    if (res.respCode === 200) {
      const item = JSON.parse(res.source);
      console.log(item);
      data.item = item;
      base(item.qrCode);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
function base(e: any) {
  let str = e.substring(0, 5);
  let qrcode: any;
  if (str === 'cloud') {
    qrcode = e;
  } else {
    qrcode = `data:image/png;base64,${e}`;
  }
  data.qrcode = qrcode;
}
function handlePreview() {
  uni.previewImage({
    urls: [data.qrcode],
    current: data.qrcode
  });
}
function del() {
  uni.showModal({
    title: '提示',
    content: '你确定删除该桌子吗？',
    complete: async (ress: any) => {
      if (ress.confirm) {
        try {
          const { id } = data;
          const res = await api.board_del({ id });
          if (res.respCode === 200) {
            toast('删除成功');
            back();
          } else {
            toast(res.msg);
          }
        } catch (error) {
          err(error);
          throw error;
        }
      }
    }
  });
}
function edit() {
  to('/dj/addboard/addboard?id=' + data.id);
}
</script>

<style scoped>
.code {
  width: 300rpx;
  height: 300rpx;
}
.info {
  width: 710rpx;
  background: #ffffff;
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  padding: 16rpx;
  box-sizing: border-box;
}
.info_title {
  padding-left: 18rpx;
  padding-bottom: 8rpx;
  border-bottom: 2rpx solid #ebebf0;
  font-size: 28rpx;
  font-family: Inter-Regular, Inter;
  font-weight: 400;
  color: #28282b;
}
.del {
  padding-left: 26rpx;
}
.in {
  font-size: 24rpx;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 30rpx;
}
.fo {
  font-size: 28rpx;
  font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
  font-weight: 600;
  color: #3d3d3d;
  margin-top: 10rpx;
}
.foot {
  width: 710rpx;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 50rpx;
}
.btn {
  width: 30%;
  line-height: 80rpx;
  text-align: center;
  font-size: 34rpx;
  font-weight: bold;
  background-color: #ffffff;
  border-radius: 24rpx;
}
</style>
